<template>
  <div class="wrap">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <!-- <span class="title">设置店铺信息：</span> -->
        <h2 class="title">设置店铺信息：</h2>
      </div>
      <el-form ref="form" class="form" :model="form" label-width="80px">
        <el-form-item label="上传logo">
          <div class="uploadWrap logo">
            <div class="imgList flex flex-align-end">
              <a href="javascript:;" :style="'background-image: url('+logo+');background-size: cover'" class="add-btn">
                <div class="add-icon" :class="!logo?'border-dashed':''">
                  <span v-if="!logo">+</span>
                  <input type="file" class="updata" @change="setlogo" accept=".gif,.jpg,.jpeg,.png,.mp4">
                </div>
              </a>
              <p class="red">图片大小不超过200K</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="店铺名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-input v-model="form.openTime"></el-input>
        </el-form-item>
        <el-form-item label="门店相册">
          <div class="uploadWrap album">
            <div class="imgList">
              <div v-for="(img, i) in imgList" :key="i">
                <div :style="'background-image: url('+img.imgData+');'" v-if="img.imgData.indexOf('mp4')"></div> 
              </div> 
              <a href="javascript:;" class="add-btn">
                <div class="add-icon border-dashed"><span>+</span><input type="file" class="updata" @change="setAlbum" accept=".gif,.jpg,.jpeg,.png,.mp4"></div>
              </a>
              <p class="red">图片大小不超过500K</p>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商家公告">
          <el-input type="textarea" v-model="form.notice" :autosize="{ minRows: 3, maxRows: 5}"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确认</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import ImageFile from '../util/image-file'
export default {
  data() {
    return {
      form: {
        logo: '',
        name: '',
        address: '',
        openTime: '',
        imgList: [],
        notice: ''
      },
      logo: '',
      imgList: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      const self = this
      self.$api.store.get().then((res)=>{
        console.log(res)
        if (res.code === 0) {
          if(res.data){
            self.form = res.data
          }
        } else {
          self.$message.error(res.userMsg)
        }
      })
    },
    onSubmit() {
      const self = this
      self.$api.store.add(self.form).then((res)=>{
        if (res.code === 0) {
          self.$message.success('保存成功')
        } else {
          self.$message.error(res.userMsg)
        }
      })
    },
    setlogo (e) {
      const self = this
      let image = new ImageFile()
      image.compress({file: e.target.files[0]}).then(res => {
        const imgRes = res
        if(imgRes.blob.size>(200*1024)){
          self.$message.error('图片大小不超过200K')
        }else{
          self.logo = imgRes.dataURL
          let params = {
            imgData:  self.logo
          }
          self.$api.images.add(params).then((res)=>{
            console.log(res)
            if (res.code === 0) {
              self.form.logo = res.data.path
            }
          })
        }
      })
    },
    setAlbum (e) {
      const self = this
      let image = new ImageFile()
      image.compress({file: e.target.files[0]}).then(res => {
        const imgRes = res
        if(imgRes.blob.size>(500*1024)){
          self.$message.error('图片大小不超过500K')
        }else{
          self.imgList.push({ imgData: imgRes.dataURL })
          self.$api.images.add({imgData: imgRes.dataURL}).then((res)=>{
            if (res.code === 0) {
              self.form.imgList.push({imgData: res.data.path})
            }
          })
        }
      })
    },
  }
}
</script>
<style lang="scss">
  .wrap{
    .title{
      font-size: 22px;
      padding: 10px;
    }
    .form{
      max-width: 1000px;
    }
    .album,.uploadWrap{
      overflow: hidden;
      .imgList{
        width: 100%;
        overflow: hidden;
        div{
          width: 95px;
          height: 95px;
          float: left;
          background-size: cover;
          background-repeat: no-repeat;
          margin: 15px 5px;
          border-radius: 5px;
        }
        a.add-btn {
          width: 95px;
          display: block;
          text-decoration: none;
          margin: 0 10px;
          float: left;
          .add-icon {
            width: 90px;
            height: 90px;
            text-align: center;
            line-height: 90px;
            font-size: 48px;
            color: #ccc;
            border-radius: 5px;
            margin: 15px 5px;
            position: relative;
            input.updata {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              opacity: 0;
              width: 90px;
            }
          }
          .border-dashed {
            border: dashed 2px #c0c4cc;
          }
        }
      }
    }
    // .logo,.uploadWrap .add-btn {
    //   width: 320px;
    //   display: block;
    //   text-decoration: none;
    //   margin: 14px 5px;
    //   height: 200px;
    //   border: 2px dashed #ccc;
    //   .red-border{
    //     border: dashed 2px red;
    //   }
    //   .grey-bg {
    //     border: dashed 2px #c0c4cc;
    //     background:rgba(243,246,255,1);
    //   }
    //   .add-icon {
    //     width: 320px;
    //     height: 200px;
    //     border-radius: 5px;
    //     position: relative;
    //     text-align: center;
    //     span {
    //       line-height: 200px;
    //       font-size: 56px;
    //       color: #ccc;
    //     }
    //     input.updata
    //     {
    //       position: absolute;
    //       top: 0;
    //       bottom: 0;
    //       left: 0;
    //       opacity: 0;
    //       width: 100%;
    //       overflow: hidden;
    //     }
    //   } 
    // }
  }
   
</style>

